<template>
  <div class="collect-page">
    <!-- 顶部 -->
    <van-search
      v-model="value"
      placeholder="请输入小区或地址"
      show-action
      style="background-color: #21b97a"
    >
      <template #left>
        <van-icon name="arrow-left" @click="$router.go(-1)" color="#fff"/>
      </template>
      <template #label>
        <span class="city" @click="$router.push('/city')">上海</span>
        <span class="line"></span>
      </template>
      <template #action>
        <van-icon name="location-o" size="20" color="#fff" />
      </template>
    </van-search>
    <!-- 区域 -->
    <div>
      <van-tabs @click="onClike">
        <van-tab title="区域" confirm="fn">
          <van-picker show-toolbar :columns="columns" @confirm="onConfirm" />
        </van-tab>
        <van-tab title="方式">
          <div class="zzc">
            <Fs :list="fs"></Fs></div
        ></van-tab>
        <van-tab title="租金">
          <div class="zzc">
            <Money :list="money"></Money></div
        ></van-tab>
        <van-tab title="筛选">
          <div class="zzc">
            <Sx
              :sxshow="sxShow"
              :sxhx="sxhx"
              :sxcx="sxcx"
              :sxlc="sxlc"
              :sxld="sxld"
            ></Sx></div
        ></van-tab>
      </van-tabs>
    </div>

  </div>
</template>

<script>
import Fs from '../components/fs.vue'
import Sx from '../components/sx.vue'
import Zj from '../components/zj.vue'
export default {
  components: Fs,
  Sx,
  Zj,
  name: 'collect-page',
  data () {
    return {
      value: '',
      option: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 }
      ],
      columns: [
        // 第一列
        {
          values: [
            '杭州',
            '宁波',
            '温州',
            '绍兴',
            '湖州',
            '嘉兴',
            '金华',
            '衢州'
          ],
          defaultIndex: 2
        },
        // 第二列
        {
          values: ['东', '南', '西', '北'],
          defaultIndex: 1
        }
      ]
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
/deep/ .van-search .van-icon {
  color: #21b97a;
}
.van-search {
  top: 25px;
  width: 100%;
  background-color: red;
  color: #21b97a;
}
.van-search__label {
  margin-right: 20px;
}
.line {
  width: 1px;
  height: 14px;
  background: #ccc;
  display: inline-block;
  margin-left: 20px;
  position: relative;
  top: 4px;
}
.van-icon-arrow-left {
font-size: 20px;
padding-right:15px
}
</style>
